<template>
  <div class="add-category">
    <div class="dialog">
      <div class="header flex-center">
        <span>添加币种分类</span>
        <i class="iconfont iconguanbi" @click="$emit('cancel')"></i>
      </div>
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        class="form"
        label-width="80px"
        label-position="left"
      >
        <el-form-item label="钱包类型" prop="wallet_type">
          <el-radio v-model="form.wallet_type" :label="1">去中心化钱包</el-radio>
          <el-radio v-model="form.wallet_type" :label="2">托管钱包</el-radio>
        </el-form-item>
        <el-form-item label="分类名称" prop="name">
          <el-tabs v-model="nameLang">
            <el-tab-pane label="中文" name="zh">
              <el-input v-model="form.name['zh-CN']" placeholder="请输入分类名称"></el-input>
            </el-tab-pane>
            <el-tab-pane label="英文" name="en">
              <el-input
                v-model="form.name['en-US']"
                placeholder="Please enter a classification name"
              ></el-input>
            </el-tab-pane>
            <el-tab-pane label="日文" name="ja">
              <el-input v-model="form.name['ja']" placeholder="カテゴリ名を入力してください。"></el-input>
            </el-tab-pane>
            <el-tab-pane label="韩文" name="ko">
              <el-input v-model="form.name['ko']" placeholder="분류 이름 을 입력 하 십시오"></el-input>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model.number="form.sort" placeholder="请输入排序，值为整数"></el-input>
        </el-form-item>
        <div class="flex-center bottom">
          <el-button size="small" type="primary" @click="submit">确定</el-button>
          <el-button size="small" @click="$emit('cancel')">取消</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  addStarCategory,
  updateStarCategory
} from "../../views/CoinsManage/Coins.service.js";
export default {
  props: ["platform", "detail"],
  data() {
    return {
      nameLang: "zh",
      form: {
        wallet_type: 1,
        name: {
          "zh-CN": "",
          "en-US": "",
          ja: "",
          ko: ""
        },
        sort: "",
        status: 1,
        platform_id: Number(this.platform)
      },
      rules: {
        name: [
          { required: true, message: "分类名称不能为空", trigger: "blur" }
        ],
        sort: [
          { required: true, message: "排序不能为空", trigger: "blur" },
          {
            min: 1,
            range: true,
            type: "number",
            message: "数值只能为大于0的整数",
            trigger: "blur"
          }
        ],
        wallet_type: [{ required: true, message: "", trigger: "blur" }]
      }
    };
  },
  mounted() {
    if (this.detail.type === 1) {
      this.form = this.detail.data;
    } else return;
  },
  methods: {
    submit() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          const res =
            this.detail.type === 0
              ? await addStarCategory(this.form)
              : await updateStarCategory(this.form);
          if (res.code === 0) {
            this.$notify.success({
              title: "提示",
              message: this.detail.type === 0 ? "添加成功" : "编辑成功"
            });
            this.$emit("success");
          }
        } else {
          this.$notify.error({
            title: "提示",
            message: "请检查参数！"
          });
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss">
.add-category {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000000, $alpha: 0.3);
  z-index: 1001;
  .dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    min-width: 500px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    .header {
      margin-bottom: 10px;
      padding: 15px 0;
      span {
        font-weight: 600;
        font-size: 18px;
      }
      i {
        position: absolute;
        right: 10px;
        font-size: 20px;
        cursor: pointer;
        transition: 0.2s;
      }
      i:hover {
        color: #409eff;
      }
    }
  }
  .form {
    padding: 20px 30px;
    .bottom {
      padding-top: 25px;
    }
  }
}
</style>


